<template>
	<w-container :showCopyright="false" :hasNav="false" :isTabPage="false" :loading="loading" id='product-details'>
		<view class="pa-16">
			<z-common-box padding="12px 20px">
				<view class="flex flex-ai-center flex-js-sb">
					<view class="font-size-14 font-color-666">
						<text>分享社群，已获得 </text>
						<text class="font-color-theme ml-6 mr-6">{{ totalIntegral }}</text>
						<text> 积分 </text>
					</view>
					<view @click="shareShow = true" class="border pa-6 br-8 font-size-14 font-color-theme">分享图片</view>
				</view>
			</z-common-box>
			<view class="mt-16 mb-16 font-color-theme_title">上传图片:</view>
			<z-upload :filesList="fileList3" @uploadSuccess="uploadSuccess" @delete="deletePic" multiple :maxCount="10">
			</z-upload>
			<view class="font-color-999 font-size-14 mt-16">上传截图，图片大小限制5M内，数量3张</view>
			<view class="flex flex-dir-col align-center flex-js-center mt-16">
				<view class="flex flex-ai-center flex-js-sb font-size-12 mb-16" style="color: #979997;">
					<view class="zhanbi2">日期</view>
					<view class="zhanbi">上传图片数量</view>
					<view class="zhanbi1">审核结果</view>
				</view>
				<view v-for="(item,index) in shareList" :key="index" :class="index%2 == 0?'bg_jb':''"
					class="item_box flex flex-ai-center flex-js-sb font-size-13 font-color-theme_title">
					<view class="zhanbi2">{{ item.create_time_text }}</view>
					<view class="zhanbi">{{ item.images_num }}</view>
					<view v-if="item.status==1" class="zhanbi1">通过</view>
					<view v-else-if="item.status==0 || item.status==2" class="zhanbi1 font-color-theme">{{ item.status==2 ? '无效':'待审核' }}</view>
				</view>
				<z-loading type="empty" v-if="isEmpty"></z-loading>
			</view>
			<z-common-box boxShadow marginTop="10rpx">
				<w-big-title title="分享社群规则" class="mb-12"></w-big-title>
				<view class="font-color-666 font-size-14">
					<u-parse :content="handleLang(share_rule)"></u-parse>
				</view>
			</z-common-box>
			<view class="bg_jb_theme br-33 font-color-white text-center ptb-12 mt-16" @click="submit">提交</view>
		</view>
		<u-popup :show="shareShow" mode="center" bgColor="transparent">
			<view class="response" style="width: 600rpx; height: 720rpx">
				<!-- <l-painter isH5PathToBase64 v-if="isShowPainter" isRenderImage :board="base" @success="success"
					type="2d" /> -->
				<view class="flex align-center justify-center response">
					<u-image width="600rpx" height="720rpx" :src="score_share_image"></u-image>
				</view>

				<view class="closeBtn" @click="shareShow = false">
					<u-icon name="close" size="30"></u-icon>
				</view>
			</view>
			<view @click="saveImage" class="bg_jb_theme ptb-14 br-33 font-color-white text-center"
				style="width: 167.5px;margin: 32px auto;">复制图片</view>
		</u-popup>
	</w-container>
</template>

<script>
	import { mapState } from 'vuex'
	import lPainter from "@/components/lime-painter/";
	import {
		get_my_share_details,
		shareSub
	} from '@/api/integral/index.js'
	export default {
		components: {
			lPainter,
		},
		computed:{
			...mapState('config', {
				score_share_image(state) {
					return this.$ossUrl + state.info.score_share_image
				},
				share_rule(state) {
					return state.info.share_rule
				}
			})
		},
		data() {
			return {
				shareShow: false,
				loading: false,
				fileList3: [],
				path: "",
				isShowPainter: true,
				base: {
					width: "600rpx",
					height: "720rpx",
					borderRadius: "10rpx",
					overflow: "hidden",
					views: [{
							type: "image",
							src: `/static/img/bg/share_bg.png`,
							css: {
								left: "0",
								top: "0",
								width: "600rpx",
								height: "720rpx",
							},
						},
						{
							type: "image",
							src: "/static/img/bg/quiz-header-bg.png",
							// mode: "aspectFit",
							css: {
								left: "30rpx",
								top: "100rpx",
								width: "540rpx",
								height: "300rpx",
							},
						},
						{
							type: "text",
							text: "", //标题 1
							css: {
								top: "430rpx",
								left: "38rpx",
								color: "#222",
								fontWeight: "bold",
								fontSize: "40rpx",
							}
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "38rpx",
								width: "60rpx",
								height: "32rpx",
								background: "#25406F",
								radius: "4px 0px 0px 4px"
							}
						},
						{
							type: "text",
							text: "限量 ", //标题 1
							css: {
								top: "490rpx",
								left: "45rpx",
								color: "#FEDCC7",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "98rpx",
								width: "160rpx",
								height: "32rpx",
								background: "#FEDCC7",
								radius: "0px 4px 4px 0px"
							}
						},
						{
							type: "text",
							text: "1000份", //标题 1
							css: {
								top: "490rpx",
								left: "125rpx",
								color: "#462A18",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "view",
							css: {
								top: "490rpx",
								left: "280rpx",
								width: "82rpx",
								height: "32rpx",
								background: "linear-gradient(84deg, #FF2D61 0%, #FF3214 100%)",
								radius: "4px"
							}
						},
						{
							type: "text",
							text: "抽签购", //标题 1
							css: {
								top: "490rpx",
								left: "290rpx",
								color: "#fff",
								fontWeight: "bold",
								fontSize: "22rpx",
							},
						},
						{
							type: "text",
							text: "立即抽签即有机会赢得", //标题 1
							css: {
								top: "560rpx",
								left: "38rpx",
								color: "#222",
								fontWeight: "bold",
								fontSize: "28rpx",
							},
						},
						{
							type: "text",
							text: "[牛归艺数 爱吃小盆友]", //标题 2
							css: {
								top: "600rpx",
								left: "38rpx",
								color: "#666666",
								fontWeight: "bold",
								fontSize: "20rpx",
							},
						},
						{
							type: "text",
							text: "截图分享", //标题 2
							css: {
								top: "630rpx",
								left: "38rpx",
								color: "#999",
								fontSize: "20rpx",
							},
						},
						{
							type: "image",
							src: "/static/img/bg/erweima.png", //标题 2
							css: {
								width: "122rpx",
								height: "122rpx",
								top: "550rpx",
								left: "420rpx",
								color: "#999",
								fontSize: "20rpx",
							},
						},
					],
				},
				
				totalIntegral: 0,
				shareList: [],
				isEmpty:false
			}
		},
		created() {
			this.getInfo(1)
			this.getInfo(2)
		},
		methods: {
			// 获取积分和列表
			getInfo(type) {
				get_my_share_details({ type }).then(res=>{
					if(type==1) this.totalIntegral = res.data.score
					if(type==2) {
						this.shareList = res.data
						this.isEmpty = !res.data.length
					}
				}).catch(()=>{})
			},
			
			// 提交
			submit() {
				if(!this.fileList3.length) { 
					uni.showToast({ title:'请先上传图片',icon:'none' }) 
					return 
				}
				uni.showModal({
					title:'温馨提示',
					content: '确认提交?',
					confirmColor:'#E4AA59',
					success: (res) => {
						if(res.confirm){
							shareSub({ images:this.fileList3.map(item=>item.url) }).then(res=>{
								this.getInfo(2)
								uni.showToast({
									icon: 'success',
									title: '提交成功'
								})
							}).catch(()=>{})
						}
					}
				})
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList3${event.name}`].splice(event.index, 1)
			},
			//上传成功之后的处理
			uploadSuccess(fileList) {
				this.fileList3 = fileList
			},
			saveImage() {
				this.$tools.saveImage(this.score_share_image)
			},
			success(event) {
				this.path = event;
				uni.setStorageSync("sharePath", event);
				this.isShowPainter = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.zhanbi {
		width: 25%;
		text-align: center;
	}

	.zhanbi1 {
		width: 20%;
		text-align: center;
	}

	.zhanbi2 {
		width: 35%;
		text-align: center;
	}

	.item_box {
		width: 100%;
		height: 80rpx;
	}

	.bg_jb {
		background: linear-gradient(90deg, #91EDF3 0%, rgba(145,243,243,0) 100%);
	}

	.closeBtn {
		opacity: 0.5;
		position: absolute;
		top: 24rpx;
		right: 20rpx;
	}
</style>
